<!--
 * @Author: 谢子健 1075010289@qq.com
 * @Date: 2024-09-17 13:08:44
 * @LastEditors: 谢子健 1075010289@qq.com
 * @LastEditTime: 2024-10-19 21:18:14
 * @FilePath: \ilink-vue-frontend\src\views\Square\LearningSquare\Home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { getVideoDetailApi } from '@/api/study/course';
import { useFileTransStore } from '@/stores/fileTransStore';
import ilinkCopilot from '@/views/Square/LearningSquare/Lesson/components/ilinkCopilot.vue';
import LearningSidebar from '@/views/Square/LearningSquare/Lesson/components/LearningSidebar.vue';
import LearningHeader from '@/views/Square/LearningSquare/Lesson/video/components/VideoHeader.vue';
import { onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import CustomComponent from './components/CustomComponent.vue';
import VideoPlayerComponent from './components/VideoPlayerComponent.vue';
import { getUserMeta } from '@/api/PersonalSpace/PersonalInfo';
import { Modal } from 'ant-design-vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
const props = defineProps({
  courseId: {
    type: String,
    required: true,
  },
  folderId: {
    type: String,
    required: true,
  },
  sourceId: {
    type: String,
    required: true,
  },
  filePath: {
    type: String,
    required: true,
  },
});
const route = useRoute();
const router = useRouter();

const fileTransStore = useFileTransStore();
// transResponse的值非常复杂,且在多个组件使用，使用pinia进行存储
const videoSourceFileInfo = async (sourceId: string) => {
  const transResponse = await getVideoDetailApi(sourceId);

  fileTransStore.setData(transResponse);
}
const handleBackClick = () => {
  const path = (route.params.filePath as string).split('/')[1];

  const finalPath = encodeURIComponent(`${path}|`);
  router.push(`/teacher/manage/knowledgespace/${finalPath}`);
}
watch(
  () => route.params,
  () => {
    videoSourceFileInfo(props.sourceId);
  },
);

// 检查基本信息是否完整
const validateUserMeta = async () => {
  const response = await getUserMeta()

  // 认为以下字段只有有一个空余就是未填写
  if (!response || !response.college || response.college === '' || !response.enrollmentYear || response.enrollmentYear === '' || !response.major || response.major === '' || !response.studentId || response.studentId === '' || !response.studentStatus || response.studentStatus === '') {
    Modal.error({
      title: '请前往个人中心完成基本信息的填写',
      content: '观看视频前请保证基本信息完整,不然无法记录学习进度',
    })
  }
}

onMounted(() => {
  validateUserMeta()
  videoSourceFileInfo(props.sourceId)
})
</script>

<template>
  <a-layout class="learningPage-body" :style="{ backgroundColor: '#fff', height: '100vh', overflow: 'hidden' }">
    <a-layout-sider
      width="80"
      class="learningPage-sider"
      :style="{ backgroundColor: '#fff', overflowY: 'auto', maxHeight: '100vh' }"
    >
      <!-- <LearningSidebar :folder-id="folderId" :course-id="courseId" /> -->
    </a-layout-sider>

    <a-layout :style="{ backgroundColor: '#fff', height: '100vh', overflow: 'hidden' }">
      <a-layout-header
        class="learningPage-header"
        :style="{ backgroundColor: '#fff', padding: 0, height: '60px' }"
      >
        <LearningHeader :course-id="courseId" :folder-id="folderId">
          <template #leftSection>
            <div class="leftSection" @click="handleBackClick">
              <ArrowLeftOutlined class="icon" />
              <span class="title">返回我的知识空间</span>
            </div>
          </template>
          <template #rightSection>
            <div />
          </template>
        </LearningHeader>
      </a-layout-header>

      <a-layout-content
        :style="{
          backgroundColor: '#fff',
          padding: 0,
          margin: 0,
          overflowY: 'auto',
          maxHeight: 'calc(100vh - 80px)',
        }"
      >
        <div class="learningPage-content">
          <a-row type="flex">
            <a-col
              flex="400px"
              :style="{ backgroundColor: '#fff', maxHeight: 'calc(100vh - 80px)', padding: '20px' }"
            >
              <div class="learningPage-main-left">
                <VideoPlayerComponent :source-id="sourceId" :course-id="courseId" />
              </div>
            </a-col>

            <a-col
              flex="calc(100vh - 900px)"
              :style="{ backgroundColor: '#fff', overflowY: 'auto', maxHeight: 'calc(100vh - 80px)' }"
            >
              <div class="learningPage-main-left">
                <CustomComponent :source-id="sourceId" :course-id="courseId" />
              </div>
            </a-col>
          </a-row>
        </div>
      </a-layout-content>
    </a-layout>
    <!-- <ilinkCopilot :source-id="sourceId" :course-id="courseId" :file-path="filePath" :folder-id="folderId" /> -->
  </a-layout>
</template>

<style scoped lang="scss">
.app-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.leftSection {
    display: flex;
    align-items: center;
    // 鼠标聚焦时变为小手
    cursor: pointer;
}
.icon {
      font-size: 15px;
      margin-right: 8px;
      padding: 5px;
      border: 1px solid #ccc;
      //添加边框border-radius: 4px;
      //为边框添加圆角padding: 4px;
      //为图标增加内边距background: none;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
}

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
</style>
